<template>
  <!-- 分配角色对话框 -->
  <el-dialog
    title="分配角色"
    :visible="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <div>
      <div class="username">当前用户：{{ username }}</div>
      <div class="role">当前角色：{{ rolename }}</div>
      <span>分配用户：</span>
      <el-select v-model="selectvalue" placeholder="请选择">
        <el-option
          v-for="(item, index) in roleList"
          :key="index"
          :label="item.roleName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="defineAllotRole">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { request } from "@/utils/axios.js";
export default {
  components: {},
  props: ["dialogVisible"],
  data() {
    return {
      username: "",
      rolename: "",
      roleList: [],
      //需要被分配的用户信息
      userId: 0,
      // 已经选中的id值
      selectvalue: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 点击❌关闭对话框事件
    handleClose() {
      this.$emit("handleCloseDialog");
    },
    // 点击确定按钮事件
    async defineAllotRole() {
      if (!this.selectvalue) {
        return this.$message.warning("请选择角色");
      }
      await request.put(`users/${this.userId}/role`, {
        rid: this.selectvalue,
      });
      this.$emit("handleCloseDialog");
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.username {
  margin-bottom: 14px;
}
.role {
  margin-bottom: 14px;
}
</style>